import React, {Component} from 'react';
import './App.css';
import {Layout, Menu, Icon, List, Avatar, message} from 'antd';
import LoginAndRegisterModal from './LoginAndRegisterModal';
import ArticleList from './ArticleList';
import ArticleInfo from './ArticleInfo';
import reqwest from "reqwest";

const {Content, Footer, Header} = Layout;


class App extends Component {
    state = {
        data: [],
        loading: false,
        showArticle: false,
        articleID: '',
    };

    loadedRowsMap = {};

    getData = (callback) => {
        reqwest({
            url: 'api/articles',
            type: 'json',
            method: 'get',
            data: {limit: 10, start: this.state.data.length},
            contentType: 'application/json',
            success: (res) => {
                callback(res);
            },
        });
    };

    isRowLoaded = ({index}) => {
        return !!this.loadedRowsMap[index];
    };

    componentDidMount() {
        this.getData((res) => {
            this.setState({
                data: res,
            });
        });
    }

    handleInfiniteOnLoad = ({startIndex, stopIndex}) => {
        let data = this.state.data;
        this.setState({
            loading: true,
        });
        for (let i = startIndex; i <= stopIndex; i++) {
            // 1 means loading
            this.loadedRowsMap[i] = 1;
        }
        // if (data.length > 19) {
        //     message.warning('Virtualized List loaded all');
        //     this.setState({
        //         loading: false,
        //     });
        //     return;
        // }
        this.getData((res) => {
            if (res.length !== 0) {
                data = data.concat(res);
                this.setState({
                    data,
                    loading: false,
                });
            } else {
                message.info('已无更多文章！');
                this.setState({
                    loading: false,
                })
            }
        });
    };

    handleClickArticle = (id, e) => {
        e.preventDefault();
        this.setState({
            showArticle: true,
            articleID: id,
        });
    };

    handleClickArticleInfo = () => {
        this.setState({
            showArticle:false,
            articleID:'',
        })
    };

    renderItem = ({index, key, style}) => {
        const {data} = this.state;
        const item = data[index];
        return item && (
            <List.Item key={key} style={style}>
                <List.Item.Meta
                    avatar={<Avatar>{item.author.name.substr(0, 1)}</Avatar>}
                    title={<a onClick={(e) => {
                        this.handleClickArticle(item.id, e)
                    }}>{item.title}</a>}
                    description={item.author.email}
                />
                <div>{item.createdAt}</div>
            </List.Item>
        );
    };

    render() {
        return !this.state.showArticle ? (
            <Layout className="layout">
                <Header style={{lineHeight: '64px', height: '64px'}}>
                    <Menu
                        theme="dark"
                        mode="horizontal"
                        defaultSelectedKeys={['1']}
                        style={{lineHeight: '63px'}}
                    >
                        <Menu.Item key="1"><a href="/"><Icon type='home'/>首页</a></Menu.Item>
                        <LoginAndRegisterModal/>
                    </Menu>
                </Header>
                <Content style={{padding: '30px 50px'}}>
                    <div style={{background: '#fff', padding: 24, minHeight: 280}}>
                        <ArticleList
                            data={this.state.data}
                            loading={this.state.loading}
                            handleInfiniteOnLoad={this.handleInfiniteOnLoad}
                            isRowLoaded={this.isRowLoaded}
                            renderItem={this.renderItem}
                        />
                    </div>
                </Content>
                <Footer style={{textAlign: 'center'}}>
                    Ant Design ©2016 Created by Ant UED
                </Footer>
            </Layout>
        ) : (
            <ArticleInfo articleID={this.state.articleID} handleClickArticleInfo={this.handleClickArticleInfo}/>
        )
    }
}

export default App;
